<template>
  <div class="outer">
    <header class="header">
      <!-- 头部的第一行 -->
      <div class="top">
        <div class="container">
          <div class="loginList"></div>
          <div class="typeList">
            <!-- <a href="###">登录</a> -->
            <!-- <a href="###">免费注册</a> -->
            <!-- 未登录状态 -->
            <p v-if="userName==true">
              <router-link to="/">首页</router-link>
              <!-- <router-link to="/">{{ userName }}</router-link> -->
              <router-link to="/">个人中心</router-link>
              <router-link to="/center/orderlist">我的订单</router-link>
              <router-link to="/AddCartSuccess">购物车</router-link>
              <a @click.stop="logout">退出</a>
            </p>
            <p v-else>
              <router-link to="/">首页</router-link>
              <router-link to="/Login">登录</router-link>
              <router-link to="/Login">免费注册</router-link>

              <router-link to="/shopcart">我的购物车</router-link>
            </p>
            <!-- 已登录 -->
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  name: "myHead",
  data() {
    return {
      keyWord: "",
    };
  },
  methods: {
    logout() {
      this.$store.dispatch("userLogout");
      this.userName = "";
    },
  },

  computed: {
    userName() {
      // console.log("sfsd"+JSON.stringify(this.$store.state.user.isLogin))
      return this.$store.state.user.isLogin;
    },
  },

  mounted() {
    // this.hei();
    // if(location.href.indexOf("#reloaded==-1")){
    //   location.href=location.href+"#reloaded";
    //   location.reload();
    // }
  },
  // watch:{
  //   userName:function(newo,old){
  //     //
  //     // location. reload()
  //   }
  // }
};
</script>

<style lang="less" scoped>
.outer {
  .header {
    & > .top {
      background-color: #eaeaea;
      height: 45px;
      line-height: 45px;

      .container {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        .loginList {
          float: left;
          margin-left: 10px;
          p {
            float: left;
            margin: 0;
            margin-right: 10px;

            .register {
              border-left: 1px solid #b3aeae;
              padding: 0 5px;
              margin-left: 5px;
            }
          }
        }

        .typeList {
          float: right;

          a {
            padding: 0 10px;

            & + a {
              border-left: 1px solid #b3aeae;
            }
          }
        }
      }
    }
  }

  .type-nav {
    border-bottom: 2px solid #e1251b;

    .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      position: relative;

      .all {
        width: 210px;
        height: 45px;
        background-color: #e1251b;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
      }

      .nav {
        a {
          height: 45px;
          margin: 0 22px;
          line-height: 45px;
          font-size: 16px;
          color: #333;
        }
      }

      .sort {
        position: absolute;
        left: 0;
        top: 45px;
        width: 210px;
        height: 461px;
        position: absolute;
        background: #fafafa;
        z-index: 999;

        .all-sort-list2 {
          .item {
            h3 {
              line-height: 30px;
              font-size: 14px;
              font-weight: 400;
              overflow: hidden;
              padding: 0 20px;
              margin: 0;

              a {
                color: #333;
              }
            }

            .item-list {
              display: none;
              position: absolute;
              width: 734px;
              min-height: 460px;
              background: #f7f7f7;
              left: 210px;
              border: 1px solid #ddd;
              top: 0;
              z-index: 9999 !important;

              .subitem {
                float: left;
                width: 650px;
                padding: 0 4px 0 8px;

                dl {
                  border-top: 1px solid #eee;
                  padding: 6px 0;
                  overflow: hidden;
                  zoom: 1;

                  &.fore {
                    border-top: 0;
                  }

                  dt {
                    float: left;
                    width: 54px;
                    line-height: 22px;
                    text-align: right;
                    padding: 3px 6px 0 0;
                    font-weight: 700;
                  }

                  dd {
                    float: left;
                    width: 415px;
                    padding: 3px 0 0;
                    overflow: hidden;

                    em {
                      float: left;
                      height: 14px;
                      line-height: 14px;
                      padding: 0 8px;
                      margin-top: 5px;
                      border-left: 1px solid #ccc;
                    }
                  }
                }
              }
            }

            &:hover {
              .item-list {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  .list-container {
    width: 1200px;
    margin: 0 auto;

    .sortList {
      height: 464px;
      padding-left: 210px;

      .center {
        box-sizing: border-box;
        width: 740px;
        height: 100%;
        padding: 5px;
        float: left;
      }

      .right {
        float: left;
        width: 250px;

        .news {
          border: 1px solid #e4e4e4;
          margin-top: 5px;

          h4 {
            border-bottom: 1px solid #e4e4e4;
            padding: 5px 10px;
            margin: 5px 5px 0;
            line-height: 22px;
            overflow: hidden;
            font-size: 14px;

            .fl {
              float: left;
            }

            .fr {
              float: right;
              font-size: 12px;
              font-weight: 400;
            }
          }

          .news-list {
            padding: 5px 15px;
            line-height: 26px;

            .bold {
              font-weight: 700;
            }
          }
        }

        .lifeservices {
          border-right: 1px solid #e4e4e4;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;

          .life-item {
            border-left: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            margin-right: -1px;
            height: 64px;
            text-align: center;
            position: relative;
            cursor: pointer;
            width: 25%;

            .list-item {
              // background-image: url(../images/home/icons.png);
              width: 61px;
              height: 40px;
              display: block;
            }

            .service-intro {
              line-height: 22px;
              width: 60px;
              display: block;
            }

            &:nth-child(1) {
              .list-item {
                background-position: 0px -5px;
              }
            }

            &:nth-child(2) {
              .list-item {
                background-position: -62px -5px;
              }
            }

            &:nth-child(3) {
              .list-item {
                background-position: -126px -5px;
              }
            }

            &:nth-child(4) {
              .list-item {
                background-position: -190px -5px;
              }
            }

            &:nth-child(5) {
              .list-item {
                background-position: 0px -76px;
              }
            }

            &:nth-child(6) {
              .list-item {
                background-position: -62px -76px;
              }
            }

            &:nth-child(7) {
              .list-item {
                background-position: -126px -76px;
              }
            }

            &:nth-child(8) {
              .list-item {
                background-position: -190px -76px;
              }
            }

            &:nth-child(9) {
              .list-item {
                background-position: 0px -146px;
              }
            }

            &:nth-child(10) {
              .list-item {
                background-position: -62px -146px;
              }
            }

            &:nth-child(11) {
              .list-item {
                background-position: -126px -146px;
              }
            }

            &:nth-child(12) {
              .list-item {
                background-position: -190px -146px;
              }
            }
          }
        }

        .ads {
          margin-top: 5px;

          img {
            opacity: 0.8;
            transition: all 400ms;

            &:hover {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  .today-recommend {
    .py-container {
      width: 1200px;
      margin: 0 auto;

      .recommend {
        height: 165px;
        background-color: #eaeaea;
        margin: 10px 0;
        display: flex;

        .clock {
          width: 16.67%;
          background-color: #5c5251;
          color: #fff;
          font-size: 18px;
          text-align: center;

          .time {
            padding: 30px 0;
          }

          h3 {
            margin: 9px 0;
            font-weight: 700;
            font-size: 18px;
            line-height: 30.06px;
          }
        }

        .banner {
          width: 20.83%;

          img {
            width: 100%;
            height: 100%;
            transition: all 400ms;

            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .rank {
    width: 1200px;
    margin: 0 auto;

    .tab {
      margin: 0 auto;
      overflow: hidden;
      width: 312px;

      .tab-tit {
        text-align: center;

        a {
          display: block;
          padding: 0 18px;
          float: left;
          text-decoration: none;
          font-size: 16px;
          color: #999;

          p {
            margin: 5px 0;
          }

          .img {
            i {
              width: 35px;
              height: 35px;
              display: block;
              // background: url(../images/home/bg0.png);
              margin-left: 10px;
            }
          }

          .text {
            line-height: 28px;
          }
        }

        .on {
          color: #e60012;

          .img {
            i {
              background-position: -35px 0;
            }
          }
        }
      }
    }

    .content {
      overflow: hidden;
      padding: 10px;

      ul {
        li {
          overflow: hidden;
          list-style: none;
          line-height: 18px;

          .img-item {
            border: 1px solid #e1251b;
            width: 269px;
            float: left;
            overflow: hidden;
            margin: 0 12px 10px;
            background: #fff;

            .tab-pic {
              width: 230px;
              height: 210px;
              overflow: hidden;
              text-align: center;
              margin: 5px auto 18px;

              a {
                img {
                  width: 200px;
                  height: 200px;
                }
              }
            }

            .tab-info {
              background: #fafafa;

              .info-title {
                height: 50px;
                line-height: 28px;
                overflow: hidden;
                margin: 0 auto;
                padding-left: 10px;

                a {
                  color: #333;
                  text-decoration: none;
                }
              }

              .info-price {
                font-size: 20px;
                color: #e1251b;
                height: 35px;
                padding-left: 10px;
                display: block;
                line-height: 24px;
                margin: 10px auto 0;
              }
            }
          }
        }
      }
    }
  }

  .like {
    margin-top: 15px;

    .py-container {
      width: 1200px;
      margin: 0 auto;

      .title {
        overflow: hidden;

        .fl {
          float: left;
          font-size: 20px;
          line-height: 30px;
        }

        .fr {
          float: right;
          // background-image: url(../images/home/icons.png);
          width: 66px;
          height: 25px;
          background-position: 182px -104px;
          line-height: 30px;
          font-size: 12px;
          font-weight: 400;
          color: #666;
          text-decoration: none;
        }
      }

      .bd {
        .favourate {
          border: 1px solid #e4e4e4;
          overflow: hidden;
          padding: 0 10px;
          box-sizing: border-box;
          display: flex;

          li {
            height: 250px;
            margin: 0 -1px;
            overflow: hidden;
            background: #fff;
            position: relative;
            width: 16.667%;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;

            img {
              width: 142px;
              height: 142px;
              transition: all 400ms;

              &:hover {
                opacity: 0.8;
                transform: scale(1.1);
              }
            }

            .like-text {
              padding: 0;
              width: 142px;
              border-right: 1px solid #e4e4e4;

              p {
                margin: 5px 0;
              }

              h3 {
                color: #df3033;
                font-size: 20px;
                line-height: 30px;
                margin: 9px 0;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }

  .floor {
    margin-top: 15px;

    .py-container {
      width: 1200px;
      margin: 0 auto;

      .title {
        .fl {
          float: left;
          color: #c81623;
          font-size: 20px;
          line-height: 30px;
          margin: 9px 0;
          font-weight: 700;
        }

        .fr {
          float: right;

          .nav-tabs {
            margin: 10px 0 0;
            display: inline-block;

            li {
              float: left;
              line-height: 18px;

              a {
                padding-top: 1px;
                font-weight: 400;
                background-color: #fff;

                &::after {
                  content: "|";
                  padding: 0 10px;
                }
              }

              &:nth-child(7) {
                a {
                  &::after {
                    content: "";
                  }
                }
              }

              &.active {
                a {
                  color: #e1251b;
                }
              }
            }
          }
        }
      }

      .tab-content {
        border-top: 2px solid #c81623;
        border-bottom: 1px solid #e4e4e4;

        .tab-pane {
          .floor-1 {
            height: 360px;
            display: flex;

            .blockgary {
              width: 210px;
              height: 100%;
              background: #f7f7f7;

              .jd-list {
                padding: 15px 0;
                overflow: hidden;

                li {
                  list-style-type: none;
                  float: left;
                  width: 40%;
                  margin: 0 10px;
                  border-bottom: 1px solid #e4e4e4;
                  text-align: center;
                  line-height: 26px;
                }
              }

              img {
                width: 100%;
              }
            }

            .floorBanner {
              width: 330px;
              height: 100%;
            }

            .split {
              width: 220px;
              height: 100%;
              position: relative;

              .floor-x-line {
                position: absolute;
                background: #e4e4e4;
                width: 220px;
                height: 1px;
                top: 180px;
              }

              .floor-conver-pit {
                width: 100%;
                height: 50%;

                img {
                  width: 100%;
                  height: 100%;
                  transition: all 400ms;

                  &:hover {
                    opacity: 0.8;
                  }
                }
              }
            }

            .center {
              border: 1px solid #e4e4e4;
            }
          }
        }
      }
    }
  }

  .brand {
    margin: 10px 0;

    .py-container {
      width: 1200px;
      margin: 0 auto;

      .brand-list {
        overflow: hidden;
        padding: 15px 0;
        background: #f7f7f7;
        line-height: 18px;

        .brand-item {
          width: 120px;
          float: left;
          height: 37px;

          img {
            border-left: 1px dotted #ccc;
            padding: 0 10px;
          }

          &:first-child {
            img {
              border-left: 0;
            }
          }
        }
      }
    }
  }

  .footer {
    background-color: #eaeaea;

    .footer-container {
      width: 1200px;
      margin: 0 auto;
      padding: 0 15px;

      .footerList {
        padding: 20px;
        border-bottom: 1px solid #e4e1e1;
        border-top: 1px solid #e4e1e1;
        overflow: hidden;
        padding-left: 40px;

        .footerItem {
          width: 16.6666667%;
          float: left;

          h4 {
            font-size: 14px;
          }

          .footerItemCon {
            li {
              line-height: 18px;
            }
          }

          &:last-child img {
            width: 121px;
          }
        }
      }

      .copyright {
        padding: 20px;

        .helpLink {
          text-align: center;

          li {
            display: inline;

            .space {
              border-left: 1px solid #666;
              width: 1px;
              height: 13px;
              background: #666;
              margin: 8px 10px;
            }
          }
        }

        p {
          margin: 10px 0;
          text-align: center;
        }
      }
    }
  }
}
</style>